<template>
  <el-dialog
    title="焊机信息"
    :visible.sync="dialogVisible"
    width="1000px">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <div id="main" class="mod-home" style="width: 300px;height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="main1" class="mod-home" style="width: 300px;height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="main2" class="mod-home" style="width: 300px;height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div id="main3" class="mod-home" style="width: 300px;height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
<!--    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">-->
  </el-dialog>
</template>

<script>
import $ from 'jquery'
import * as echarts from 'echarts';
export default {
  name: 'wave',
  data(){
    return {
      dataForm: {
        key: ''
      },
      datajson: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      Visiable: false,
      dialogVisible:false,
      aa: false,
      area: {
        area1: ''
      }
    }
  },
  methods:{
    empChart(){
      this.$http({
        url: this.$http.adornUrl('/emp/employee/num'),
        method: 'get'
      }).then(({data}) => {
        var yearData = [
          {
            year: "2020", // 年份
            data: [
              // 两个数组是因为有两条线
              [24, 90, 15, 180, 90, 220, 210, 10, 60, 250, 150, 30],
              // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
          }
          // ,
          // {
          //   year: "2021", // 年份
          //   data: [
          //     // 两个数组是因为有两条线
          //     [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
          //     [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          //   ]
          // }
        ];
        // console.log(data[0].actor)
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main'));
// 绘制图表
        myChart1.setOption( {
          title: {
            text: '实时电流'
          },
          // 通过这个color修改两条线的颜色  , "#ed3f35"
          color: ["#FF0000"],
          tooltip: {
            trigger: "axis"
          },
          legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            // 修改图例组件 文字颜色
            textStyle: {
              color: "#4c9bfd"
            },
            // 这个10% 必须加引号
            right: "10%"
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true, // 显示边框
            borderColor: "#012f4a", // 边框颜色
            containLabel: true // 包含刻度文字在内
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "11:41",
              "11:42",
              "11:43",
              "11:44",
              "11:45",
              "11:46",
              "11:47",
              "11:48",
              "11:49",
              "11:50",
              "11:51",
              "11:52"
            ],
            axisTick: {
              show: false // 去除刻度线
            },
            axisLabel: {
              color: "#4c9bfd" // 文本颜色
            },
            axisLine: {
              show: false // 去除轴线
            }
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false // 去除刻度线
            },
            axisLabel: {
              color: "#4c9bfd" // 文本颜色
            },
            axisLine: {
              show: false // 去除轴线
            },
            splitLine: {
              lineStyle: {
                color: "#012f4a" // 分割线颜色
              }
            }
          },
          series: [
            {
              // name: "新增粉丝",
              type: "line",
              // true 可以让我们的折线显示带有弧度
              smooth: true,
              data: yearData[0].data[0]
            },
            {
              // name: "新增游客",
              type: "line",
              smooth: true,
              data: yearData[0].data[1]
            }
          ]
        });
      })
    },
    posChart(){
      this.$http({
        url: this.$http.adornUrl('/m/material/num'),
        method: 'get'
      }).then(({data}) => {
        var yearData = [
          {
            year: "2020", // 年份
            data: [
              // 两个数组是因为有两条线
              [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
              //[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
              // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
          }
          // ,
          // {
          //   year: "2021", // 年份
          //   data: [
          //     // 两个数组是因为有两条线
          //     [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
          //     [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          //   ]
          // }
        ];
        // console.log(data[0].actor)
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main1'));
// 绘制图表
        myChart1.setOption({
          title: {
            text: '实时电压'
          },
          // 通过这个color修改两条线的颜色  , "#ed3f35"
          color: ["#FF0000"],
          tooltip: {
            trigger: "axis"
          },
          legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            // 修改图例组件 文字颜色
            textStyle: {
              color: "#4c9bfd"
            },
            // 这个10% 必须加引号
            right: "10%"
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true, // 显示边框
            borderColor: "#012f4a", // 边框颜色
            containLabel: true // 包含刻度文字在内
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "11:41",
              "11:42",
              "11:43",
              "11:44",
              "11:45",
              "11:46",
              "11:47",
              "11:48",
              "11:49",
              "11:50",
              "11:51",
              "11:52"
            ],
            axisTick: {
              show: false // 去除刻度线
            },
            axisLabel: {
              color: "#4c9bfd" // 文本颜色
            },
            axisLine: {
              show: false // 去除轴线
            }
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false // 去除刻度线
            },
            axisLabel: {
              color: "#4c9bfd" // 文本颜色
            },
            axisLine: {
              show: false // 去除轴线
            },
            splitLine: {
              lineStyle: {
                color: "#012f4a" // 分割线颜色
              }
            }
          },
          series: [
            {
              // name: "新增粉丝",
              type: "line",
              // true 可以让我们的折线显示带有弧度
              smooth: true,
              data: yearData[0].data[0]
            },
            {
              // name: "新增游客",
              type: "line",
              smooth: true,
              data: yearData[0].data[1]
            }
          ]
        });
      })
    },
    equipChart(){
      this.$http({
        url: this.$http.adornUrl('/equipinfo/equipinfotable/num'),
        method: 'get'
      }).then(({data}) => {
        var yearData = [
          {
            year: "2020", // 年份
            data: [
              // 两个数组是因为有两条线
              [24, 69, 101, 178, 55, 220, 21, 23, 12, 160, 240, 79],
              // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
          }
          // ,
          // {
          //   year: "2021", // 年份
          //   data: [
          //     // 两个数组是因为有两条线
          //     [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
          //     [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          //   ]
          // }
        ];
        // console.log(data[0].actor)
        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main2'));
// 绘制图表
        myChart1.setOption({
          title: {
            text: '实时丝速'
          },
          // 通过这个color修改两条线的颜色  , "#ed3f35"
          color: ["#FF0000"],
          tooltip: {
            trigger: "axis"
          },
          legend: {
            // 如果series 对象有name 值，则 legend可以不用写data
            // 修改图例组件 文字颜色
            textStyle: {
              color: "#4c9bfd"
            },
            // 这个10% 必须加引号
            right: "10%"
          },
          grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true, // 显示边框
            borderColor: "#012f4a", // 边框颜色
            containLabel: true // 包含刻度文字在内
          },

          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "11:41",
              "11:42",
              "11:43",
              "11:44",
              "11:45",
              "11:46",
              "11:47",
              "11:48",
              "11:49",
              "11:50",
              "11:51",
              "11:52"
            ],
            axisTick: {
              show: false // 去除刻度线
            },
            axisLabel: {
              color: "#4c9bfd" // 文本颜色
            },
            axisLine: {
              show: false // 去除轴线
            }
          },
          yAxis: {
            type: "value",
            axisTick: {
              show: false // 去除刻度线
            },
            axisLabel: {
              color: "#4c9bfd" // 文本颜色
            },
            axisLine: {
              show: false // 去除轴线
            },
            splitLine: {
              lineStyle: {
                color: "#012f4a" // 分割线颜色
              }
            }
          },
          series: [
            {
              // name: "新增粉丝",
              type: "line",
              // true 可以让我们的折线显示带有弧度
              smooth: true,
              data: yearData[0].data[0]
            },
            {
              // name: "新增游客",
              type: "line",
              smooth: true,
              data: yearData[0].data[1]
            }
          ]
        });
      })
    },
    weldChart(){
      this.$http({
        url: this.$http.adornUrl('/tbposition/tbposition/list'),
        method: 'get'
      }).then(({data}) => {
        var yearData = [
          {
            year: "2020", // 年份
            data: [
              // 两个数组是因为有两条线
              [70, 16, 167, 66, 145, 210, 156, 220, 45, 134, 176, 25],
              // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
            ]
          }
          // ,
          // {
          //   year: "2021", // 年份
          //   data: [
          //     // 两个数组是因为有两条线
          //     [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
          //     [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
          //   ]
          // }
        ];
      console.log(data.page.list[0].position)
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById('main3'));
// 绘制图表
      myChart1.setOption({
        title: {
          text: '实时气流'
        },
        // 通过这个color修改两条线的颜色  , "#ed3f35"
        color: ["#FF0000"],
        tooltip: {
          trigger: "axis"
        },
        legend: {
          // 如果series 对象有name 值，则 legend可以不用写data
          // 修改图例组件 文字颜色
          textStyle: {
            color: "#4c9bfd"
          },
          // 这个10% 必须加引号
          right: "10%"
        },
        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: true, // 显示边框
          borderColor: "#012f4a", // 边框颜色
          containLabel: true // 包含刻度文字在内
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "11:41",
            "11:42",
            "11:43",
            "11:44",
            "11:45",
            "11:46",
            "11:47",
            "11:48",
            "11:49",
            "11:50",
            "11:51",
            "11:52"
          ],
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: "#4c9bfd" // 文本颜色
          },
          axisLine: {
            show: false // 去除轴线
          },
          splitLine: {
            lineStyle: {
              color: "#012f4a" // 分割线颜色
            }
          }
        },
        series: [
          {
            // name: "新增粉丝",
            type: "line",
            // true 可以让我们的折线显示带有弧度
            smooth: true,
            data: yearData[0].data[0]
          },
          {
            // name: "新增游客",
            type: "line",
            smooth: true,
            data: yearData[0].data[1]
          }
        ]
      });
      })
    },
    init(state){
      this.dialogVisible = true;
      console.log('子组件状态为' + state)
      // console.log('子组件ename为' + ename)
      this.empChart();
      this.posChart();
      this.equipChart();
      this.weldChart();
      this.dataListLoading = false
      }
    }
}
</script>

<style scoped>

</style>
